<script setup>

import GoodsItem from "@/views/home/components/GoodsItem.vue";
import axios from "axios";
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {onMounted, ref} from "vue";

const route = useRoute()
const searchResult = ref([])
const searchClothes = () => {
  axios.get('/api/searchClothes', {
    params: {
      name: route.params.condition,
    }
  }).then(res => {
    searchResult.value = res.data.data
  })
}

onBeforeRouteUpdate((to) => {
  console.log('路由变化');
  // 使用最新的路由参数请求最新的搜索数据
  axios.get('/api/searchClothes', {
    params: {
      name: to.params.condition,
    }
  }).then(res => {
    searchResult.value = res.data.data
  })
})

onMounted(() => {
  searchClothes()
})
</script>

<template>
<div class="container">
  <div class="ref-goods">
    <div class="body">
      <GoodsItem v-for="clothes in searchResult" :clothes="clothes" :key="clothes.clNo"/>
    </div>
  </div>
</div>
</template>

<style scoped>
* {
  margin: 0 auto;
}

.container {
  width: 100%;
  background-color: #f5f5f5;
  padding: 20px 0;

  .ref-goods {
    background-color: #fff;
    position: relative;
    max-width: 1200px;

    .body {
      margin: 0 auto;
      max-width: 1200px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 40px 30px;
    }
  }
}
</style>